<template>
     <div class="discussOut">
   <div style="margin: 20px 0;padding:0 20px;"></div>
   <el-input
  type="textarea"
  placeholder="请输入内容"
  v-model="textarea"
  maxlength="60"
  show-word-limit
>
</el-input>
  <div class="send">
       <div>
        评论
      </div>
  </div>
   <div class="WonderfulComment" v-if="hotComments.length>1">
      <h2>热门评论</h2>
       <div class="Comment-top" v-for="(item,i) in hotComments" :key="i">
       <img :src="item.user.avatarUrl" alt="">
        <div class="Comment-item">
           <div class="Comment-item-s">
           <span @click="toMyhome(item.user.userId)" class="n1">{{item.user.nickname}}:</span>
           <span style="font-size:16px;">{{item.content}}</span>
          </div>
          <!-- 别人评论 -->
           <div class="Others" v-for="(item2,s) in item.beReplied" :key="s">
            <span @click="toMyhome(item2.user.userId)" class="n1">{{item2.user.nickname}}:</span>
            <span>{{item2.content}}</span>
          </div>
            <div style="padding-top:20px; display:flex;justify-content:space-bewwten">
             <p>{{item.timeStr}}</p>
           <div class="Comment-right">
           <span ><i :class="{active:t===1}" class="iconfont icon-good" @click="commentLike(item.commentId)"></i>{{item.likedCount}}</span>
           <span> <i class="iconfont icon-zhuanfa"></i></span>
           <span> <i class="iconfont icon-pinglun"></i></span>
           </div>
          </div>
        </div>
    </div>
    
   </div> 
  <div class="WonderfulComment" v-if="Commentlist.length>1">
      <h2>最新评论</h2>
       <div class="Comment-top" v-for="(item,i) in Commentlist" :key="i">
       <img :src="item.user.avatarUrl" alt="">
        <div class="Comment-item">
           <div class="Comment-item-s">
           <span @click="toMyhome(item.user.userId)" class="n1">{{item.user.nickname}}:</span>
           <span style="font-size:14px;">{{item.content}}</span>
          </div>
          <!-- 别人评论 -->
           <div class="Others" v-for="(item2,s) in item.beReplied" :key="s">
            <span  @click="toMyhome(item2.user.userId)" class="n1">{{item2.user.nickname}}:</span>
            <span>{{item2.content}}</span>
          </div>
          <div style="padding-top:20px; display:flex;justify-content:space-bewwten">
             <p>{{item.timeStr}}</p>
           <div class="Comment-right">
           <span ><i :class="{active:t===1}" class="iconfont icon-good" @click="commentLike(item.commentId)"></i>{{item.likedCount}}</span>
           <span> <i class="iconfont icon-zhuanfa"></i></span>
           <span> <i class="iconfont icon-pinglun"></i></span>
           </div>
          </div>
        </div>
    </div>
    
   </div> 
   <div style="text-align:center">
   <el-pagination
  background
  layout="prev, pager, next"
  @current-change=paging
  :total="total">
   </el-pagination>
   </div>

 </div>
</template>

<script>
export default {
   name:"RecommendedPlaylist",
   props:{
     Commentlist:{
       type:Array,
       defalut:[]
     },
       hotComments:{
       type:Array,
       defalut:[]
     },
     total:{
       type:Number,
       total:0
     }
   },
       data(){
     return {
       textarea:"",
       t:-1,
     }
   },
   methods:{
     paging(val){
        this.$emit("pading",val)
     },
      // 跳转主页
      async toMyhome(id){  
          this.$router.push(`/MyHome?uid=${id}`)
      },
    async commentLike(item,i){  //点赞评论 
      // console.log(item.commentId)
    //     if(item.liked===false){
    //       item.liked=!item.liked
    //          t=1
    //     }else{
    //        item.liked=!item.liked
    //         t=0
    //     }
    //    const {data:res}=await this.$request("/comment/like",{
    //      id:this.$route.query.id,
    //      cid:item.commentId,
    //      t:t,
    //      type:2
    //    })
    //    if(res.code)

     }
   },
   
}
</script>

<style lang="less" scoped>
   .send{
     margin-top:10px;
       padding-right:20px;
     width:100%;
     height:30px;
     div{
       float:right;
         width:70px;
         height:30px;
       
         border:1px solid #aaa;
         border-radius:10px;
         line-height:30px;
         text-align:center;
         &:hover{
           background-color:#ccc;
         }
     }
   }
   .WonderfulComment{
     margin:30px 0;
     h2{
       color:#000;
       margin-bottom:10px;
     }
     .Comment-top{
       position:relative;
       padding-top:15px;
       display:flex;
     
        border-bottom:1px solid #ccc;
        width:100%;
        height:100%;
       img{
         width:40px;
         height:40px;
         border-radius:50%;
       }
         .Comment-item{
            width:100%;
           padding-left:10px;
          display:flex;
          flex-direction:column;
          justify-content:space-between;
        .Others{
          margin:10px 0;
          padding:4px 20px;
          width:100%;
          background-color:#ccc;
          font-size:14px;
           border-radius:4px;
        }
          .n1{
             font-size:14px;
              color:#65A4DA;
             }
          p{
            width:100%;
            height:25px;
            font-size:12px;
          }
          .Comment-item-s{
            font-size:14px;
           }
         }
        .Comment-right{
          position:absolute;
          right:40px;
           span{
             display: inline-block;
             width:100px;
             height:25px;
             
           }
           .active{
             color:red;
           }
         }
     }
   }
    
</style>